<template>
  <div id="login-bg">
    <div class="login-model">
      <el-row>
        <el-col aria-colspan="16"><h1>统一认证平台</h1></el-col>
      </el-row>
      <el-form :rules="rules" :model="dto" ref="dto" label-width="100px">
        <el-form-item prop="username" label="用户名">
          <el-input type="text" v-model="dto.username" clearable placeholder="域账号/手机号/邮箱"/>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" v-model="dto.password" clearable placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item label-width="100">
          <el-button type="primary" @click="login('dto')" round>登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
          <!--        <el-button @click="resetForm('dto')">重置</el-button>-->
          <el-link type="info" @click="forgetPwd" style="margin-left: 30px">忘记密码</el-link>
        </el-form-item>
      </el-form>
    </div>
    <el-button class="register_button" align="right" plain @click="register">注册</el-button>
  </div>
</template>

<script>
import {getCurrentInstance, reactive, ref} from "vue";
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      dto: {
        username: ref(''),
        password: ref('')
      },
      rules: {
        username: [
          {required: true, message: '请输入域账号/邮箱/手机号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      }
    }
  },
  setup() {
    const {proxy} = getCurrentInstance()
    const login = (formName) => {
      proxy.$refs[formName].validate((valid) => {
        console.log("formName is {}", valid)
        if (valid) {
          proxy.$service.login({
            login_identity: proxy.dto.username,
            password: proxy.dto.password,
            callback_url: proxy.$concat.callback_url,
            clientId: proxy.$concat.appKey,
            clientSecret: proxy.$concat.appSecret
          }).then(result => {
            if (result.res.code == 0) {
              let code = result.res.data
              proxy.$service.getUserToken({
                code: code
              }).then(result => {
                let userToken = result.res.data.user_token
                localStorage.setItem("user_token", userToken);
                proxy.$service.getUserInfo2({
                  user_token: userToken
                }).then(result => {
                  let userinfo = result.res.data
                  localStorage.setItem("user_info",JSON.stringify(userinfo))
                  if (userinfo != null) {
                    if (userinfo.type === 'ADMIN') {
                      proxy.$router.push("/home")
                    } else {
                      proxy.$router.push("/userDetail")
                    }
                  } else {
                    ElMessage.error("获取用户失败," + result.res.msg)
                  }
                })
              })
            } else {
              ElMessage.error(result.res.msg);
            }
          })
        } else {
          console.log("-----error valid-----")
          return false;
        }
      });
    }
    const forgetPwd = ()=>{
      proxy.$router.push("/forgetPass")
    }
    const register = () => {
      proxy.$router.push("/register")
    }
    return {login, register,forgetPwd}
  }
}
</script>

<style>

.login-model {
  padding: 20px;
  width: 400px;
  min-height: 260px;
  background: #fff;
  border-radius: 3px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -200px;
  z-index: 1;
  box-shadow: 0 2px 25px 0 rgb(0 0 0 / 30%);
}

.register_button {
  padding: 8px 20px;
  position: fixed;
  left: 90%;
  top: 2%;
  z-index: 1;
}

</style>